<template>
<div>
    
    <div class="hot">
        热门推荐
    </div>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in List" :key="item.id">
            <router-link :to="'/Index/Newsinfo'+item.id">
                 <div class="picbox mui-pull-left">
                    <img class="pic mui-pull-left" :src="item.img_url">
                 </div>
                <div class="content mui-pull-left">
                    <p class='mui-ellipsis'>{{item.title}}</p>发表时间：<span>{{item.add_time}}</span>
                    <div class=" mui-pull-right">
                        点击：<span>{{item.click}}</span>
                    </div>    
                </div>
            </router-link>
        </li>
    </ul>
</div>   
</template>
<script>
export default {
    name:"Talkcontent",
    data(){
        return{
            List:[]
        }
    },
    created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
        this.getinfo()
    },
    methods:{
        getinfo(){
            this.$axios({
                method:"get",
                url:"http://www.liulongbin.top:3005/api/getnewslist",
            }).then((res)=>{
                // console.log(res)
                // console.log(res.data)
                this.List = res.data.message
                console.log(this.List)
            })
        }
    }    
}
</script>
<style lang="less" scoped>
.hot{
      font-size: 0.28rem;
      margin: 0.12rem 0 0.16rem 0.3rem; 
  }
  
.picbox{
    margin-top: .16rem;
    height: 1rem;
    width: 1rem;
}
.pic{
    text-align: center;
    width: 100%;
}
.content{
    float: left;
    margin-left: .2rem;
    padding: .1rem 0 0 .12rem;
    font-size: 0.28rem;
    color:skyblue;
    height: 1rem;
    line-height: 0.44rem;
}
.content p {
    
    font-size: 0.28rem;
    color: black;
}
.click{
    margin-left:3rem; 
}
.mui-table-view-cell{
    padding: .2rem .2rem;
}
</style>
